//Alert manager
var msgStack = []; // Array Of All Alerts
var MSGtop;        // Message That Was On Top During An Animation
var MSGbottom;     // Message That Was Below During An Animation
var diff = 0;      // The Current Differnce Between The Stack And Currently Displayed Alert

// Creates A Event Listener So The User Can View All Of The Alerts Using The backAnAlert Function
$(document).ready(function(){
	$('#news').click(function(){backAnAlert()})
});

// Animates An Alert In
function makeAlert(msg){
	msgStack.push(msg)
	$('#dummyMSG').text(msg)
	$('#dummyAlertCounter').text(msgStack.length)
	$('#dummyNews').animate({
		left:'0px',
		opacity:1
	},800,function(){
		$('#MSG').text(msg)
		$('#alertCounter').text(msgStack.length)
		$('#dummyNews').css({left:'-40%',opacity:'0'})
	})
}
// Goes Back One Alert In The Stack (diff+1)
function backAnAlert(){
	diff++
	if(diff==msgStack.length){
		diff=0
		$('#dummyNews').css({left:'-40%'})
		MSGtop = $('#MSG').text()
		$('#dummyMSG').text(MSGtop)
		$('#dummyAlertCounter').text(1)
		$('#dummyNews').css({left:'0px',opacity:1})
		MSGbottom = msgStack[(msgStack.length-diff)-1]
		$('#MSG').text(MSGbottom)
		$('#alertCounter').text(msgStack.length-diff)
		$('#dummyNews').animate({
			left:'-40%',
			opacity:0
		},800,false)
	}else{
		$('#dummyNews').css({left:'-40%'})
		MSGtop = $('#MSG').text()
		$('#dummyMSG').text(MSGtop)
		$('#dummyAlertCounter').text((msgStack.length-(diff-1)))
		$('#dummyNews').css({left:'0px',opacity:1})
		MSGbottom = msgStack[(msgStack.length-diff)-1]
		$('#MSG').text(MSGbottom)
		$('#alertCounter').text(msgStack.length-diff)
		$('#dummyNews').animate({
			left:'-40%',
			opacity:0
		},800,false)
	}
}

// DEBUGGING! Only Have 1 Block Running At A Time!
// ***********************************************

// setInterval(function(){makeAlert("This Is An Alert")},1500,false)



/*
$(document).ready(function(){
$('#widgets').html(($('#widgets').html())+"<button id='make'>Make Alert</button><textarea id='alertValue'></textarea><button id='back'>Go Back!</button>")
$('#make').click(function(){makeAlert($('#alertValue').val())});
$('#back').click(function(){backAnAlert()});
});
*/

// ************************************************


function widget(id, icon, action, update, ontap, init){
	this.id = id
	this.icon = icon
	this.action = action
	this.update = update
	this.ontap = ontap
	this.init = init
	console.log("Creating "+id)
	
	var ids=[]
	$(document).ready(function(){
		$("#widgets").find("div").each(function(){
			ids.push(this.id)
		})
		while (true){
			if (ids.indexOf(id)>-1){
				id=id+"~"
			}else{
				this.id=id
				break
			}
		}
	})
	
	function display(){
		id=this.id
		icon=this.icon
		action=this.action
		ontap=this.ontap
		update=this.update
		init=this.init
		
		$(document).ready(function(){
			if(icon!=="none"){
				var imgData="<img id='IMG"+ id +"' alt='"+ id +"' src='"+icon+"'/>"
				var imgid="IMG"+id
			}else{
				var imgData=""
				var imgid=null
			}
			$('#widgets').append("<div id='"+ id +"' class='widget'>"+imgData+"</div>")
			$('#'+id).css({
				backgroundImage:"url('images/blank.png')",
				backgroundPosition:"0px 50px"
			})
			eval(parseFunction(init,id,icon))
			setFunctions(id,imgid,action,update,ontap)
			console.log("Displayed And Set Up "+id)
		})
	}
	
	this.display = display
	function setFunctions(id,icon,action,update,ontap){
		action=parseFunction(action,id,icon)
		ontap=parseFunction(ontap,id,icon)
		$('#'+id).click(function(){
			$('#'+id).css({backgroundPosition:"50px 50px"})
			setTimeout(function(){
				$('#'+id).css({backgroundPosition:"0px 50px"})
			},100,false)
			eval(ontap)
		})
		setInterval(function(){eval(action)},update,false)
	}
	
	function parseFunction(func,id){
		func=func.replace("~~icon","\"IMG"+id+"\"")
		func=func.replace("~~widget","\""+id+"\"")
		return func
	}	
}

// Varibles Ready To Use In Handler Functions:
// ~~widget -> ID of widget
// ~~icon  -> ID of icon

// TO CREATE A WIDGET:
// sample = new widget( title of widget, 
// location of icon or 'none', 
// the handler function for the widget, 
// the amount of time beteen calls of the 'action' function, 
// function to exucute on tap or 'none' )
// sample.display()
